<template>
	<view
		class="distributionMaterial"
		:class="{
			'product-skelett': isSkelett
		}"
	>
		<view
			class="distributionMaterial-item"
			:key="productItem.id"
			v-for="productItem in productList"
			@click="openMaterialProductDetail(productItem,'')"
		>
			<!-- 内容 -->
			<view class="distributionMaterial-item-main" :class="{ isFooter: !isFooter }">
				<view class="distributionMaterial-item-main-left">
					<image :src="productItem.faceImg" mode="aspectFill" />
				</view>

				<view class="distributionMaterial-item-main-right">
					<view class="product-price">
						<!-- 免预约·海鲜养生汤锅免预约海鲜养生汤锅 -->
						<view
							class="product-price-left"
							:class="{ preview: isPreview }"
							@click.stop.prevent="openProductDetail(productItem)"
						>
							{{ productItem.productTitle || '' }}
						</view>

						<view class="product-price-right">
							<template v-if="!isSkelett">
								<view>
									￥
									<text>{{ productItem | salePrice }}</text>
								</view>
								<view>
									<text>￥{{ productItem | originPrice }}</text>
								</view>
							</template>
						</view>
					</view>

					<view class="product-discount">
						<template v-if="productItem && productItem.commissionsList">
							<view class="product-discount-label" :key="subIndex" v-for="(subItem, subIndex) in productItem.commissionsList">
								<text>{{ subItem.label }}</text>
							</view>
						</template>

						<template v-if="isSkelett"><text></text></template>
					</view>
				</view>
			</view>

			<template v-if="isFooter">
				<view class="distributionMaterial-item-static">
					<view class="distributionMaterial-item-static-left">
						<!-- resourceType 1 图片  2 视频 -->
						<template v-if="productItem.resourceRespList">
							<view class="static-item" :key="subItem.id" v-for="subItem in productItem.resourceRespList">
								<view
									:class="{
										isVideo: subItem.isVideo
									}"
								>
									<image webp :src="subItem.previewUrl" lazy-load :draggable="false" />

									<template v-if="subItem.isVideo">
										<image src="@/static/icon/icon_sc_video.png" class="static-item-icon" />
									</template>
								</view>
							</view>
						</template>

						<template v-else>
							<view class="static-item">
								<view>
									<image :src="noDataIcon" />
								</view>
							</view>
						</template>
					</view>

					<view class="distributionMaterial-item-static-right">
						<view v-if="productItem.imgCount || productItem.videoCount">
							<template v-if="productItem.imgCount">
								<text>图片{{ productItem.imgCount }}张</text>
							</template>

							<template v-if="productItem.videoCount">
								<text>视频{{ productItem.videoCount }}份</text>
							</template>
						</view>

						<view v-else>暂无内容</view>
						<image :src="leftIcon" />
					</view>
				</view>

				<!-- 按钮 -->
				<view class="distributionMaterial-item-footer">
					<button @click.prevent.stop="openMaterialProductDetail(productItem, 'upload')">上传</button>
					<button @click.prevent.stop="openMaterialProductDetail(productItem)">下载</button>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { defaultImageUrl } from '@/utils';

const leftIcon = Object.freeze(require('@/static/images/my/icon_more.png'));
const noDataIcon = Object.freeze(`${defaultImageUrl}icon/icon_sc_nopicture.png`);

const filterRouterList = ['materialPage/MaterialDownload', 'materialPage/MaterialUpload'];

export default {
	name: 'distributionMaterial',

	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},

		isSkelett: {
			type: Boolean,
			default: false
		},

		skelettSize: {
			type: Number,
			default: 3
		},

		isFooter: {
			type: Boolean,
			default: true
		},

		isPreview: {
			type: Boolean,
			default: false
		},

		beforeCallBack: {
			type: Function
		},

		afterCallBack: {
			type: Function
		}
	},

	data() {
		return {
			leftIcon,
			noDataIcon
		};
	},

	filters: {
		salePrice(params = {}) {
			const { salePrice = 0 } = params;

			return salePrice / 100;
		},

		originPrice(params = {}) {
			const { originPrice = 0 } = params;

			return originPrice / 100;
		}
	},

	computed: {
		productList() {
			const { list, isSkelett, skelettSize } = this;

			if (!isSkelett) {
				return list.map((item) => {
					const { resourceRespList, ...otherParams } = item;

					return {
						...otherParams,
						resourceRespList: (resourceRespList || []).map((subItem) => {
							const { id, coverUrl, previewUrl, resourceType } = subItem;

							const isVideo = resourceType === 2;

							return {
								id,
								isVideo,
								previewUrl: isVideo ? coverUrl : previewUrl
							};
						})
					};
				});
			}

			return Array.from({ length: skelettSize }).map((item) => ({}));
		}
	},

	methods: {
		openProductDetail(params) {
			const { isPreview, afterCallBack, beforeCallBack } = this;

			if (isPreview) {
				return;
			}

			const formatParams = params?.$orig || params;
			const { id } = formatParams;

			afterCallBack?.(formatParams);

			const url = `/tandianPage/ProductDetail?productId=${id}`;

			id &&
				uni.navigateTo({
					url,
					success: () => {
						beforeCallBack?.(formatParams);
					}
				});
		},

		openMaterialProductDetail(params, router = 'download') {
			const { isPreview, afterCallBack, beforeCallBack } = this;

			if (isPreview) {
				return;
			}

			/* eslint-disable */
			const routes = getCurrentPages();
			const { route } = routes[routes.length - 1] || {};

			if (filterRouterList.includes(route)) {
				return;
			}
			/* eslint enable */
			const formatParams = params?.$orig || params;

			const { id } = formatParams;

			afterCallBack?.(formatParams);

			const url = `/materialPage/${router === 'download' ? 'MaterialDownload' : 'MaterialUpload'}?productId=${id}`;

			id &&
				uni.navigateTo({
					url,
					success: () => {
						beforeCallBack?.(formatParams);
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.distributionMaterial {
	&-item {
		background: #fff;
		border-radius: 24rpx;
		padding: 20rpx 20rpx 0;
		margin-top: 20rpx;

		&:first-child {
			margin-top: 0;
		}

		&-main {
			display: flex;
			padding-bottom: 12rpx;

			&-left {
				width: 160rpx;

				image {
					margin: 0;
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
				}
			}

			&-right {
				flex: 1;
				padding-left: 20rpx;

				.product-price {
					display: flex;
					height: 80rpx;

					&-left {
						flex: 1;

						color: #333;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						text-decoration: underline;

						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;

						&.preview {
							text-decoration: none;
						}
					}

					&-right {
						// width: 115rpx;
						text-align: right;

						font-size: 20rpx;
						overflow: hidden;

						view {
							&:first-child {
								font-size: 24rpx;
								font-weight: bold;
								color: $moneyColor;
								margin: -6rpx 0 4rpx 0;

								text {
									font-size: 40rpx;

									@include Db_moneyStyle();
								}
							}

							&:last-child text {
								color: #999;
								text-decoration: line-through;
							}
						}
					}
				}

				.product-discount {
					margin-top: 24rpx;
					display: flex;
					&-label {
						height: 48rpx;
						display: flex;
						align-items: center;
						// line-height: 48rpx;
						background: #fff0e7;
						border-radius: 12rpx;
						margin-left: 8rpx;
						padding: 0 12rpx;
						text {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #ff6b11;
						}
						&:first-child {
							margin-left: 0;
						}
					}
				}
			}

			&.isFooter {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		&-static {
			height: 80rpx;
			padding: 0 16rpx;
			border-radius: 16rpx;
			background: #f6f6f6;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				.static-item {
					float: left;
					width: 44rpx;

					view {
						width: 56rpx;
						height: 56rpx;
						position: relative;
						border-radius: 50%;
						border: 2rpx solid #f6f6f6;

						&.isVideo {
							&::after {
								content: '';
								position: absolute;
								top: 0rpx;
								left: 0rpx;
								width: 52rpx;
								height: 52rpx;
								z-index: 8;
								border-radius: 50%;
								background: rgba(0, 0, 0, 0.4);
							}
							.static-item-icon {
								display: block;
							}
						}
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;

						&.static-item-icon {
							position: absolute;
							top: 50%;
							left: 15rpx;

							width: 28rpx;
							height: 28rpx;
							z-index: 9;
							border: none;
							display: none;
							transform: translateY(-50%);
						}
					}
				}
			}

			&-right {
				color: #666;
				font-size: 22rpx;

				display: flex;
				justify-items: center;

				text {
					margin-right: 8rpx;

					&:last-child {
						margin-right: 0;
					}
				}

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}

		&-footer {
			height: 104rpx;

			display: flex;
			align-items: center;
			justify-content: flex-end;

			button {
				margin: 0;
				width: 160rpx;
				height: 56rpx;
				background: #fff;
				border-radius: 28rpx;
				border: 2rpx solid #666;

				color: #666;
				font-size: 24rpx;

				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 12rpx;

				&::after {
					display: none;
				}

				&:last-child {
					color: #fff;
					border: none;

					background: #333;
					margin-right: 0;
				}
			}
		}
	}

	&.product-skelett {
		.distributionMaterial-item-main-left {
			border-radius: 8rpx;
			background: $skelettBgColor;

			image {
				visibility: hidden;
			}
		}

		.product-price {
			height: 44rpx;
			border-radius: 8rpx;
			background: $skelettBgColor;
		}

		.distributionMaterial-item-static {
			border-radius: 8rpx;

			view {
				visibility: hidden;
			}
		}

		.product-discount {
			width: 160rpx;
			margin-top: 60rpx;
			border-radius: 8rpx;
			background: $skelettBgColor;

			view,
			text {
				visibility: hidden;
			}
		}

		.distributionMaterial-item-footer button {
			border: none;
			border-radius: 8rpx;
			background: $skelettBgColor;

			line-height: 0;
			font-size: 0;
			overflow: hidden;
		}
	}
}
</style>
